import { ApiRequest, apis } from '@/service'
import { useState } from 'react'
import { Button, Input, MessagePlugin } from 'tdesign-react'
// 别着急宝宝，理清思路
const {
  practiceService: {
    insertUser
  }
} = apis

const AddUser = () => {

  const [userName, setUserName] = useState('')
  const [userId, setUserId] = useState('')

  const onUserNameChange = (event: string) => {
    setUserName(event)
  }

  const onUserIdChange = (event: string) => {
    setUserId(event)
  }

  const onAddUser = (params: any) => {
    params = {
      userName,
      userId
    }
    ApiRequest({ api: insertUser, params }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        MessagePlugin.success(note, 2000)
      } else {
        MessagePlugin.error(note, 2000)
      }
    })
  }

  return <div className='add-user'>
    <div className='input-block'>
      <Input
        className='input-user-name'
        label='用户名字'
        placeholder='请输入用户名字'
        onChange={onUserNameChange}
      />
      <Input
        className='input-user-id'
        label='用户ID'
        placeholder='请输入用户ID'
        onChange={onUserIdChange}
      />
    </div>
    <Button
      className='add-user-btn'
      onClick={onAddUser}
    >
      添加用户
    </Button>
  </div>
}

export default AddUser